<template>
  <div>
    <el-dialog
      title="结算详情"
      :visible.sync="centerDialogVisible"
      width="80%"
      @close="cancel"
      center
    >
      <div v-loading="formLoading">
        <div class="title">结算详情</div>
        <div style="display: flex;justify-content: space-around">
          <div class="left">
            <div class="labelItem">
              <span>结算单号：</span>{{ info.orderNo }}
            </div>
            <div class="label">
              <span>修改时间：</span>{{ info.updateTime }}
            </div>
            <div class="labelItem">
              <span>结算金额：</span>{{ info.servSettledAmount }}
            </div>
            <div class="label"><span>结算节点：</span>{{ info.stlmtNode }}</div>
            <div class="labelItem"><span>结算状态：</span>{{ info.state }}</div>
            <div class="label">
              <span>已结算服务费：</span>{{ info.servSettledAmount }}
            </div>
          </div>
          <div class="right">
            <div class="labelItem">
              <span>结算方式：</span>{{ info.stlmtMethod }}
            </div>
            <div class="label">
              <span>结算订单：</span>{{ info.channelOrderNo }}
            </div>
            <div class="labelItem">
              <span>产品名称：</span>{{ info.productName }}
            </div>
            <div class="label"><span>订单来源：</span>{{ info.channelId }}</div>
            <div class="labelItem">
              <span>服务费总额：</span>{{ info.servTotalAmount }}
            </div>
            <div class="label">
              <span>预结算服务费：</span>{{ info.servPreSettledAmount }}
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="title">结算记录</div>
        <el-table
          v-loading="formLoading"
          :data="tableData.list"
          border
          size="small"
        >
          <el-table-column
            label="序号"
            type="index"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            label="结算方式"
            prop="stlmtWay"
            align="center"
          ></el-table-column>
          <el-table-column
            label="服务费总额"
            prop="servTotalAmount"
            align="center"
          ></el-table-column>
          <el-table-column
            label="已结算服务费"
            prop="stlmtAmount"
            align="center"
          ></el-table-column>
          <el-table-column
            label="预结算服务费"
            prop="balanceAmount"
            align="center"
          ></el-table-column>
          <el-table-column label="结算凭证" prop="stlmtVoucher" align="center">
            <template slot-scope="scope">
              <el-image
                :src="item"
                :preview-src-list="scope.row.stlmtVoucher"
                v-for="(item, idx) in scope.row.stlmtVoucher"
                :key="idx"
                style="width: 50px;height: 50px; margin-right: 10px"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            prop="note"
            align="center"
          ></el-table-column>
          <el-table-column
            label="结算时间"
            prop="createTime"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBillDetail,
  getCommissionRecordList,
  getCommissionRecordDetail
} from "@/api/commission";
import { getDictLabel } from "@/utils/dict";
export default {
  data() {
    return {
      centerDialogVisible: false,
      listLoading: false,
      detailDialog: false,
      tableData: {
        total: 0,
        list: []
      },
      formLoading: false,
      info: {}
    };
  },
  props: {
    show: {
      type: Boolean,
      default: () => false
    },
    detailInfo: {
      type: Object,
      default: () => {}
    },
    productChannelList: {
      type: Array,
      default: () => []
    },
    settlementMethodList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    show: {
      handler(val) {
        val && this.getInfo();
        val && this.getRecordList();
        this.centerDialogVisible = val;
      }
    }
  },
  mounted() {},
  methods: {
    getRecordList() {
      let params = {
        billId: this.detailInfo.id,
        pageNum: 1,
        pageSize: 10000
      };
      getCommissionRecordList(params).then(res => {
        res.data.list.forEach(item => {
          if (item.stlmtVoucher) {
            item.stlmtVoucher = item.stlmtVoucher.split(",");
          }
        });

        this.tableData.list = res.data.list;
      });
    },
    getInfo() {
      if (this.show) {
        this.formLoading = true;
        getBillDetail(this.detailInfo.id)
          .then(res => {
            res.data.channelId = getDictLabel(
              res.data.channelId,
              this.productChannelList
            );
            res.data.stlmtMethod = getDictLabel(
              res.data.stlmtMethod,
              this.settlementMethodList
            );
            this.info = res.data;

            this.formLoading = false;
          })
          .finally(() => {
            this.formLoading = false;
          });
      }
    },

    cancel() {
      this.centerDialogVisible = false;
      this.$emit("cancel", false);
    },
    detailcancel() {
      this.detailDialog = false;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__title {
  color: #222222;
  font-size: 16px;
  font-weight: 500;
}
.title {
  font-weight: 500;
  font-size: 18px;
  color: #222222;
  margin-bottom: 20px;
}
.left {
  width: 50%;
  margin-right: 30px;
  .labelItem {
    text-align: center;
    padding: 15px 0;
    background: #f5f5f5;
    color: #222222;
    span {
      color: #999999;
    }
  }
  .label {
    text-align: center;
    padding: 15px 0;
    color: #222222;
    span {
      color: #999999;
    }
  }
}
.right {
  width: 50%;
  .labelItem {
    text-align: center;
    padding: 15px 0;
    background: #f5f5f5;
    color: #222222;
    span {
      color: #999999;
    }
  }
  .label {
    text-align: center;
    padding: 15px 0;
    color: #222222;
    span {
      color: #999999;
    }
  }
}

.detail {
  /deep/ .el-dialog__body {
    padding-left: 90px;
  }
  /deep/ .el-form-item__label {
    color: #222222;
    font-weight: 400;
    font-size: 16px;
  }
  /deep/ .el-form-item__content {
    color: #222222;
    font-size: 16px;
  }
}
</style>
